<template>
    <div class="index">
        <h4 style="margin-bottom: 20px;">数量统计：</h4>
        <div class="row">
            <transition name="el-zoom-in-bottom">
                <div v-show="show" class="col">
                    <div>用户数量 ( <span>{{ user_total }}</span> )</div>
                </div>
            </transition>

            <transition name="el-zoom-in-bottom">
                <div v-show="show" class="col">
                    <div>视频总数( <span>{{ video_total }}</span> )</div>
                </div>
            </transition>

            <transition name="el-zoom-in-bottom">
                <div v-show="show" class="col">
                    <div>文章数量( <span>{{ article_total }}</span> )</div>
                </div>
            </transition>

            <transition name="el-zoom-in-bottom">
                <div v-show="show" class="col">
                    <div>今天活跃人数( <span>{{ signin_total }}</span> )</div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script lang="ts" setup>
// 导入工具函数
import { logged } from '../../utils/logged'
import { defineComponent, ref, reactive } from 'vue'
// 导入相关接口
import { userAllApi, videoAllApi, articleAllApi, signinAllApi } from '../../http/request'
let show = ref(true)
// 获取用户临时身份
let token = localStorage.getItem('token');
let user_total = ref(0);
let video_total = ref(0);
let article_total = ref(0);
let signin_total = ref(0);
if (token) {
    logged(token).then(
        (data: any) => {
            // 表示已经登录
            // console.log(data);
            if (data.code == 200) {
                // 获取用户总数
                userAllApi().then(
                    result => {
                        if (result.code == 200) {
                            //  console.log(result);
                            user_total.value = result['total']
                        }
                    }
                )

                // 获取文章总数
                articleAllApi().then(
                    result => {
                        if (result.code == 200) {
                            //  console.log(result);
                            article_total.value = result['total']
                        }
                    }
                )

                // 获取视频总数
                videoAllApi().then(
                    result => {
                        if (result.code == 200) {
                            //  console.log(result);
                            video_total.value = result['total']
                        }
                    }
                )

                // 获取日期对象
                let date = new Date();
                let signin_year = date.getFullYear();
                let signin_month = date.getMonth() + 1;
                let signin_date = date.getDate();

                // 获取今日签到总数
                signinAllApi({ signin_year, signin_month, signin_date })
                    .then(
                        res => {
                            // console.log('xxxxx---->', res)
                            if (res.code == 200) {
                                signin_total.value = res['total']
                            }
                        }
                    )


            }
        }
    )
}


</script>

<style scoped lang="scss">
.row {
    width: 100%;
    display: flex;
    margin-top: 20px;

    .col {
        margin-bottom: 10px;
        flex-basis: 25%;
        height: 100px;
        border-radius: 4px;
        background-color: #409eff;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
    }
}
</style>
